<!--
  湖北11选5投注页
-->
<template>
  <div class="fixed-header fixed-footer" v-shake="gen">
    <x-header>
      <span class="rule-select" @click="toggle('rulepop')">{{rule.name + (rule.bold ? '胆拖' : '')}}
        <i class="iconfont icon-caret-down font-xs"></i>
      </span>
      <a slot="right"><img class="img" src="../../assets/img/trend.png"></a>
      <a slot="right" @click="toggle('popover')"><i class="iconfont icon-menu font-xxxl"></i></a>
    </x-header>

    <popover v-model="popover" placement="bottom right" position="fixed" :z-index="502">
      <router-link class="px-3 py-2 clickable" tag="div" to='/hubei11c5/prizes'>
        <i class="iconfont align-middle icon-clock font-xxxl"></i> 最近开奖
      </router-link>
      <div class="px-3 py-2 clickable" @click="faq('hubei11c5', () => popover = false)">
        <i class="iconfont icon-info font-xxxl"></i> 玩法说明
      </div>
    </popover>
    <masker v-model="popover" position="fixed" :z-index="501"/>

    <popup v-model="rulepop" position="top">
      <rules :rules="rules" v-model="rule" :size="4"/>
    </popup>

    <div class="clearfix" v-if="more">
      <trend :data="history" :rule="rule.rule"/>
      <div class="bg-red py-2 px-3">
        <div class="text-center"><a class="text-grey">点击查看走势图</a></div>
        <div class="text-right" @click="toggle('more')">
          <a class="text-grey">收起 <i class="iconfont icon-arrow-up"></i></a>
        </div>
      </div>
    </div>

    <div v-else class="clickable px-3 py-2 bb-l" @click="toggle('more')">
      <b class="text-grey">{{prev.no}}期开奖：</b>
      <b class="text-red">{{prev.results}}</b>
      <a class="text-grey float-right">更多 <i class="iconfont icon-arrow-down"></i></a>
    </div>
    <div class="px-3 py-2 bb-l">
      <em>距{{current.no | pad}}期截止：</em>
      <countdown :duration="duration" @end="reset"/>
      <a class="text-orange float-right clickable" @click="gen" v-if="!rule.bold">
        <img class="img" src="../../assets/img/shake.png">摇一摇
      </a>
    </div>

    <ball-select class="ball-select" v-model="bet" :rule="rule" :missings="prev.missings"/>

    <footer>
      <div class="tips px-3 py-1 bg-red" v-show="bet.bets" v-html="bet.tips"></div>
      <div class="bottom-action pr-3">
        <div v-if="bet.bets" class="px-3 br-l" @click="trigger('clear')">
          <i class="iconfont icon-trash align-sub font-xxxl"></i>
          <div class="divider mx-2"></div>
        </div>
        <template v-else-if="!rule.bold">
          <popover v-model="genpop" placement="top left" style="left: 1rem" :z-index="502">
            <router-link class="clickable px-4 py-2" tag="div" :to='`/hubei11c5/cart?rule=${rule.rule}&g=1`'>机选1注</router-link>
            <router-link class="clickable px-4 py-2" tag="div" :to='`/hubei11c5/cart?rule=${rule.rule}&g=5`'>机选5注</router-link>
            <router-link class="clickable px-4 py-2" tag="div" :to='`/hubei11c5/cart?rule=${rule.rule}&g=10`'>机选10注</router-link>
          </popover>
          <masker v-model="genpop" position="fixed" :z-index="501"/>
          <button class="btn ml-3 mr-auto" @click="toggle('genpop')">机选</button>
        </template>
        <em class="mx-auto" v-show="bet.bets">共{{bet.bets}}注 <b class="text-red">￥{{bet.bets * 2}}元</b></em>
        <button class="btn btn-danger" :class="{'ml-auto': !bet.bets}" :disabled="!bet.bets" @click="confirm">确定</button>
      </div>
    </footer>

  </div>
</template>

<script>
import { Dialog, Popup } from 'vant'
import { get, id, set } from '../../utils/stoage'
import { copy } from '../../utils/arrays'
import { invoke,faq } from '../../router'
import emitter from '../../utils/emitter'
import xHeader from '../widgets/header'
import Popover from '../widgets/popover'
import Masker from '../widgets/masker'
import BallSelect from './ball-select'
import Countdown from './countdown'
import Trend from './trend'
import Rules from './rules'
import http from '../../http'

export default {
  components: {xHeader, Popup, Trend, Rules, Countdown, BallSelect, Popover, Masker},
  mixins: [emitter],
  name: 'hubei11c5',
  data: () => ({
    duration: 0,
    history: [],
    current: {},
    rules: [],
    popover: false,
    rulepop: false, // 玩法popup
    genpop: false,  // 机选popup
    more: false,    // 更多历史数据
    rule: {},       // 玩法
    bet: {
      bonus: 0,
      gain: 0,
      bets: 0
    },      // 总注数
    dis: {} // 倒计时
  }),
  beforeRouteEnter (to, from, next) {
    Promise.all([
      http.post('/highfreq/hubei11c5/rules'),
      http.post('/highfreq/hubei11c5')
    ]).then(([rules, prize]) => {
      next(vm => {
        var {duration, current, history} = prize
        vm.duration = duration
        vm.current = current
        vm.history = history
        vm.rules = rules
        vm.rule = get('hubei11c5.rule', {rule: 'q1', name: '前一', bold: false})
        invoke('shake?' + (vm.rule.bold ? 'off' : 'on'))
      })
    })
  },
  methods: {
    trigger (event, data) {
      this.broadcast('ball-select', event, data)
    },
    toggle (prop) {
      this[prop] = !this[prop]
    },
    confirm () {
      var key = 'hubei11c5.cart'
      var cart = get(key, [])
      cart.unshift({
        groups: this.bet.groups,
        rule: this.rule.rule,
        bold: this.rule.bold,
        bets: this.bet.bets,
        id: id()
      })
      set(key, cart)
      this.$router.push('/hubei11c5/cart')
    },
    reset () {
      var prev = this.current.lotteryNo
      http.post('/highfreq/hubei11c5/next', {current: prev}).then(data => {
        var {duration, next} = data
        this.history.unshift(this.current)
        this.duration = duration
        this.current = next
        Dialog.alert({
          title: '彩期已截止',
          message: `您好，第 <b class="text-red">${prev}</b> 期已截止，当前彩期是 <b class="text-red">${next.lotteryNo}</b>，付款时请确认您选择的期号。`
        })
        setTimeout(Dialog.close, 10000)
      })
    },
    gen () {
      if (this.rule.bold) { return }
      this.broadcast('ball-select', 'gen')
    },
    faq
  },
  computed: {
    prev () {
      var prev = {no: '上', results: '等待开奖'}
      if (this.history.length) {
        prev = copy(this.history[0])
        prev.results = prev.results ? prev.results.replace(/\|/g, ' ') : '等待开奖'
        prev.missings = prev.missing ? prev.missing.split(',').map(e => e.split('|')) : []
      }
      return prev
    }
  },
  watch: {
    rule (v) {
      invoke('shake?' + (v.bold ? 'off' : 'on'))
    }
  },
  beforeDestroy () {
    set('hubei11c5.rule', JSON.stringify(this.rule))
    this.timer && clearInterval(this.timer)
  }
}
</script>
